<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3266421_50h0322wnow.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3423448_tl1swu58bmo.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3423448_p9rve5la3xp.css">
    <link rel="stylesheet" href="../css/personal.css">
    <link rel="stylesheet" href="../css/retset.css">
</head>

<body>
    <div id="top">
        <div class="top-1">
            <ul class="top-title">
                <li><a href="../html/xiaomi index.html">小米商城</a></li>
                <li><a href="">MIUI</a></li>
                <li><a href="">LOT</a></li>
                <li><a href="">云服务</a></li>
                <li><a href="">天星数科</a></li>
                <li><a href="">有品</a></li>
                <li><a href="">小爱开放平台</a></li>
                <li><a href="">企业团购</a></li>
                <li><a href="">资质证照</a></li>
                <li><a href="">协议规则</a></li>
                <li><a href="">下载App</a>
                    <div class="xiaomiApp"><img src="" alt="">
                    </div>
                </li>
                <li><a href="">Select Location</a></li>
            </ul>
            <dl>
                <dt>
                <dd class="noLogin" style="display: none;">
                    <a href="../html/log.html">登录</a>
                    <a href="../html/reg.html">注册</a>
                </dd>
                <dd class="login" style="display: none;">xx</dd>
                <dd class="loginOut">退出账号</dd>
                <dd>
                    <a href="">消息通知</a>
                </dd>
                <dd class="cart">
                    <i class="iconfont icon-gouwuchekong"></i>

                    <a href="../html/cart.html">购物车(0)</a>
                    <div class="hide1">购物车中还没有商品赶快选购吧!</div>
                </dd>

                </dt>
            </dl>

        </div>

    </div>
    <div id="site-header">
        <div class="container">
            <em><img src="https://s02.mifile.cn/assets/static/image/logo-mi2.png" alt=""></em>
            <ul>
                <li>
                    <a href="">Xiaomi手机</a>
                    <div class="hide">
                        <div class="box">
                            <div class="matter">
                                <a href=""><img
                                        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/88ae9b85c5f8fbdae2ea98d58a045e1e.png?thumb=1&w=200&h=138&f=webp&q=90"
                                        alt=""></a>
                                <p><a href="">小米12Pro</a></p>
                                <span><a href="">4699元起</a></span>
                            </div>
                            <div class="matter">
                                <a href=""><img
                                        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/02ac31f8d3848f71617e074e8e50879e.png?thumb=1&w=200&h=138&f=webp&q=90"
                                        alt=""></a>
                                <p><a href="">小米12Pro</a></p>
                                <span><a href="">4699元起</a></span>
                            </div>
                            <div class="matter">
                                <a href=""><img
                                        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/075d45f17b32b39c98be850a5592bbee.png?thumb=1&w=200&h=138&f=webp&q=90"
                                        alt=""></a>
                                <p><a href="">小米12Pro</a></p>
                                <span><a href="">4699元起</a></span>
                            </div>
                            <div class="matter">
                                <a href=""><img
                                        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8cad77bda138fd94eadbc2ddfced7c56.png?thumb=1&w=200&h=138&f=webp&q=90"
                                        alt=""></a>
                                <p><a href="">小米12Pro</a></p>
                                <span><a href="">4699元起</a></span>
                            </div>
                        </div>
                    </div>
                </li>
                <li><a href="">Redmi红米</a></li>
                <li><a href="">电视</a></li>
                <li><a href="">笔记本</a></li>
                <li><a href="">平板</a></li>
                <li><a href="">家电</a></li>
                <li><a href="">路由器</a></li>
                <li><a href="">服务</a></li>
                <li><a href="">社区</a></li>
            </ul>
            <div class="know">
                <button><a class="input-1 iconfont icon-sousuo"></a></button>
                <input class="input-2" type="search" placeholder="小米笔记本">
                <ul class="result-list">
                    <li><a href="#" style="text-align: start;">全部商品</a></li>
                    <li><a href="#" style="text-align: start;">小米11</a></li>
                    <li><a href="#" style="text-align: start;">小米10S</a></li>
                    <li><a href="#" style="text-align: start;">小米笔记本</a></li>
                    <li><a href="#" style="text-align: start;">小米手机</a></li>
                    <li><a href="#" style="text-align: start;">黑鲨4</a></li>
                    <li><a href="#" style="text-align: start;">空调</a></li>
                </ul>

            </div>
        </div>

    </div>

    <div class="breadcrumbs">
        <div class="container">
            <a href="/">首页</a>
            <span class="sep">/</span>
            <span>个人中心</span>
        </div>
    </div>
    <div class="page-main" style="background-color:#f5f5f5 ;">
        <div class="container ">
            <div class="row">
                <div class="span4">
                    <div id="J_userMenu" class="user-address-menu">
                        <div class="menu-box">
                            <h3 class="title">订单中心</h3>
                            <ul class="list">
                                <li><a href="//www.mi.com/user/orderList?r=1653663700">我的订单</a></li>
                                <li><a href="//www.mi.com/user/comment?filter=1&amp;r=1653663700" data-name="bracket"
                                        id="J_comment">评价晒单</a></li>
                                <li><a href="//recharge.10046.mi.com/list">话费充值订单</a></li>
                                <li><a href="//huanxin.mi.com/order/list?r=">以旧换新订单</a></li>
                            </ul>
                        </div>
                        <div class="menu-box">
                            <h3 class="title">个人中心</h3>
                            <ul class="list">
                                <li class="active"><a href="//www.mi.com/user/portal?r=1653663700">我的个人中心</a></li>
                                <li><a href="//www.mi.com/user/message?r=1653663700">消息通知<i></i></a></li>
                                <li><a href="//www.mi.com/user/invite?r=1653663700">购买资格</a></li>
                                <li><a href="//www.mi.com/user/cashAccount?r=1653663700">现金账户</a></li>
                                <li><a href="//www.mi.com/user/ecard?r=1653663700">小米礼品卡</a></li>
                                <li><a href="//www.mi.com/user/huanxin?r=1653663700">现金券</a></li>
                                <li><a href="//www.mi.com/user/favorite?r=1653663700">喜欢的商品</a></li>
                                <li><a href="//www.mi.com/user/coupon?r=1653663700">优惠券</a></li>
                                <li><a href="//www.mi.com/user/address?r=1653663700">收货地址</a></li>
                                <li><a href="//www.mi.com/user/redpacket?r=1653663700">红包</a></li>
                            </ul>
                        </div>
                        <div class="menu-box">
                            <h3 class="title">售后服务</h3>
                            <ul class="list">
                                <li><a href="//www.mi.com/service/aftersale/list?r=1653663700">服务记录</a></li>
                                <li><a href="//www.mi.com/service/aftersale/front?r=1653663700">申请服务</a></li>
                                <li><a href="//www.mi.com/service/compensate/index?r=1653663700">领取快递报销</a></li>
                            </ul>
                        </div>
                        <div class="menu-box">
                            <h3 class="title">账户管理</h3>
                            <ul class="list">
                                <li><a href="//account.xiaomi.com" target="_blank">个人信息</a></li>
                                <li><a href="//account.xiaomi.com/pass/auth/security/home#service=setPassword"
                                        target="_blank">修改密码</a></li>
                                <li><a id="J_cancleService" href="https://m.mi.com/userdelete?from=pc">注销服务</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="span16">
                    <div class="mi-uc-box uc-main-box">
                        <div class="uc-content-box portal-content-box">
                            <div class="box-bd">
                                <div class="portal-main clearfix">
                                    <div class="user-card">

                                        <table>
                                            <thead>
                                                <tr>
                                                    <td style="width: 50px;">序号</td>
                                                    <td style="width: 50px;">账号</td>
                                                    <td style="width: 50px;">密码</td>
                                                    <td style="width: 50px;">操作</td>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <!-- <tr>
                                                    <td>1</td>
                                                    <td>zz</td>
                                                    <td>123</td>
                                                    <td>
                                                        <button class="del">删除</button>
                                                        <button class="changePwd">修改密码</button>
                                                    </td>
                                                </tr> -->
                                            </tbody>
                                        </table>

                                        <div class="cover">
                                            <div class="content">
                                                <h4 style="text-align: center;">修改密码</h4>
                                                账号：<input type="text" class="username" disabled>
                                                <br>
                                                密码：<input type="password" class="newpwd">
                                                <br> <br>
                                                <button class="confirm" onclick="btnConfirm()" style="margin-left: 27px;">确定</button>
                                                <button class="cancel" onclick="btnCancel()" style="margin-left: 10px;">取消</button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="user-actions">
                                        <ul class="action-list" style="margin-top: 35px;">
                                            <li> 账户安全：较高</li>
                                            <li>绑定手机：187******98</li>
                                            <li>绑定邮箱： 40******0@q*.com</li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="portal-sub">
                                    <ul class="info-list clearfix">
                                        <li>
                                            <img src="//s01.mifile.cn/i/user/portal-icon-1.png" alt=""
                                                style="float:left;">
                                            <h3 style="margin-left: 10px 15px;">待支付的订单：<span class="num">0</span></h3>
                                            <a href="//www.mi.com/user/orderList#type=7">查看待支付订单
                                                <i class="iconfont"></i></a>

                                        </li>
                                        <li>
                                            <img src="//s01.mifile.cn/i/user/portal-icon-2.png" alt=""
                                                style="float:left;">
                                            <h3>待收货的订单：<span class="num">0</span></h3>
                                            <a href="//www.mi.com/user/orderList#type=8">查看待收货订单
                                                <i class="iconfont"></i></a>

                                        </li>
                                        <li>
                                            <img src="//s01.mifile.cn/i/user/portal-icon-3.png" alt=""
                                                style="float: left;">
                                            <h3>待评价商品数：<span class="num">1</span></h3>
                                            <a href="//www.mi.com/user/comment">查看待评价商品
                                                <i class="iconfont"></i></a>

                                        </li>
                                        <li>
                                            <img src="//s01.mifile.cn/i/user/portal-icon-4.png" alt=""
                                                style="float:left;">
                                            <h3>喜欢的商品：<span class="num">6</span></h3>
                                            <a href="//www.mi.com/user/favorite">查看喜欢的商品
                                                <i class="iconfont"></i></a>

                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <div id="footer">
        <div class="footer-service">
            <ul class="list-service clearfix">
                <li class="first"><a href="" class="iconfont icon-weixiubaoyang">预约维修项目</a></li>
                <li><a href="" class="iconfont icon-7tianbaotuihuan"></a>7天无理由退货</a></li>
                <li><a href="" class="iconfont icon-tianbaotui">15天免费换货</a></li>
                <li><a href="" class="iconfont icon-baoyou">满69元包邮</a></li>
                <li><a href="" class="iconfont icon-dizhi">520余家售后网点</a></li>
            </ul>
        </div>
        <div class="footer-links">
            <dl class="col-links">
                <dt>帮助中心</dt>
                <dd style="color: #757575;margin: 10px 0 0;font-size: 12px;"><a href="">账户管理</a></dd>
                <dd><a href="">购物指南</a></dd>
                <dd><a href="">订单操作</a></dd>
            </dl>
            <dl class="col-links">
                <dt>服务支持</dt>
                <dd><a href="">售后政策</a></dd>
                <dd><a href="">自助服务</a></dd>
                <dd><a href="">相关下载</a></dd>
            </dl>
            <dl class="col-links">
                <dt>线下门店</dt>
                <dd><a href="">小米之家</a></dd>
                <dd><a href="">服务网点</a></dd>
                <dd><a href="">授权体验店/专区</a></dd>
            </dl>
            <dl class="col-links">
                <dt>关于小米</dt>
                <dd><a href="">了解小米</a></dd>
                <dd><a href="">加入小米</a></dd>
                <dd><a href="">投资者关系</a></dd>
                <dd><a href="">企业社会责任</a></dd>
                <dd><a href="">廉洁举报</a></dd>
            </dl>
            <dl class="col-links">
                <dt>关注我们</dt>
                <dd><a href="">新浪微博</a></dd>
                <dd><a href="">官方微信</a></dd>
                <dd><a href="">联系我们</a></dd>
                <dd><a href="">公益基金会</a></dd>
            </dl>
            <dl class="col-links">
                <dt>特色服务</dt>
                <dd><a href="">F码通道</a></dd>
                <dd><a href="">礼物码</a></dd>
                <dd><a href="">防伪查询</a></dd>
            </dl>
            <div class="col-contact">
                <p class="phone">400-100-5678</p>
                <p>8:00-18:00（仅收市话费）</p>
                <a rel="nofollow" class="btn btn-line-primary btn-small J_contactBtn"> <i class="iconfont icon-duanxin"
                        style="color: #ff6700;"></i> 人工客服 </a>
                <div class="follow">
                    关注小米
                    <a href="https://weibo.com/xiaomishangcheng" target="_blank" class="wb"></a>
                </div>
            </div>
        </div>
    </div>
    <div id="site-info">
        <div class="container">
            <div class="logo ir"></div>
            <div class="info-text">
                <p class="sites"><a rel="nofollow" href="//www.mi.com/index.html" target="_blank">小米商城</a> <span
                        class="sep">|</span> <a rel="nofollow" href="//www.miui.com/" target="_blank">MIUI</a> <span
                        class="sep">|</span> <a rel="nofollow" href="//home.mi.com/index.html" target="_blank">米家</a>
                    <span class="sep">|</span> <a rel="nofollow" href="http://www.miliao.com/" target="_blank">米聊</a>
                    <span class="sep">|</span> <a rel="nofollow" href="//www.duokan.com/" target="_blank">多看</a> <span
                        class="sep">|</span> <a rel="nofollow" href="//game.xiaomi.com/" target="_blank">游戏</a> <span
                        class="sep">|</span> <a rel="nofollow"
                        href="//b.mi.com/?client_id=180100031058&amp;masid=17409.0358" target="_blank">政企服务</a> <span
                        class="sep">|</span> <a rel="nofollow" href="//xiaomi.tmall.com/" target="_blank">小米天猫店</a>
                    <span class="sep">|</span> <a rel="nofollow" href="//privacy.mi.com/all/zh_CN/"
                        target="_blank">小米集团隐私政策</a> <span class="sep">|</span> <a rel="nofollow"
                        href="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/f516fe9e2c01.html" target="_blank">小米公司儿童信息保护规则</a>
                    <span class="sep">|</span> <a rel="nofollow" href="//m.mi.com/support/module?id=63&amp;headless=1"
                        target="_blank">小米商城隐私政策</a> <span class="sep">|</span> <a rel="nofollow"
                        href="//www.mi.com/aptitude/list?id=62" target="_blank">小米商城用户协议</a> <span class="sep">|</span>
                    <a rel="nofollow" href="//static.mi.com/feedback/" target="_blank">问题反馈</a> <span
                        class="sep">|</span> <a rel="nofollow" href="javascript:void(0);"
                        class="J_siteGlobalRegion">Select Location</a>
                </p>
                <p class="sites"><a rel="nofollow" href="http://www.mi.com/beihu" target="_blank">北京互联网法院法律服务工作站</a>
                    <span class="sep">|</span> <a rel="nofollow" href="http://www.cca.org.cn/"
                        target="_blank">中国消费者协会</a> <span class="sep">|</span> <a rel="nofollow"
                        href="http://www.bj315.org/" target="_blank">北京市消费者协会</a>
                </p>
                <p>
                    ©
                    <a href="javascript:;" target="_blank" title="mi.com">mi.com</a> 京ICP证110507号
                    <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow">京ICP备10046444号</a> <a
                        rel="nofollow"
                        href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802020134"
                        target="_blank">京公网安备11010802020134号</a> <a href="//www.mi.com/culture-license/"
                        target="_blank">京网文[2020]0276-042号</a> <br> <a href="//www.mi.com/medical/record/"
                        target="_blank">（京）网械平台备字（2018）第00005号</a> <a href="//www.mi.com/medical/qualification/"
                        target="_blank">互联网药品信息服务资格证 (京)-非经营性-2014-0090</a> <a href="//www.mi.com/business-license/"
                        target="_blank">营业执照</a> <a href="//www.mi.com/medical/list/" target="_blank">医疗器械质量公告</a> <br>
                    <a href="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e0c7d4cf3b7cd88de10196e30c92e020.png"
                        target="_blank">增值电信业务许可证</a>&nbsp;网络食品经营备案 京食药网食备202010048 &nbsp;
                    <a href="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c6859168166651511897f54fa1047fe3.png"
                        target="_blank">食品经营许可证</a> <br>
                    违法和不良信息举报电话：171-5104-4404&nbsp;<a href="https://www.mi.com/intellectual"
                        target="_blank">知识产权侵权投诉</a>&nbsp;本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
                </p>
            </div>
            <div class="info-links"><a rel="nofollow"
                    href="//privacy.truste.com/privacy-seal/validation?rid=4fc28a8c-6822-4980-9c4b-9fdc69b94eb8&amp;lang=zh-cn"
                    target="_blank"><img rel="nofollow" src="//i1.mifile.cn/f/i/17/site/truste.png"
                        alt="TRUSTe Privacy Certification"></a> <a rel="nofollow"
                    href="//search.szfw.org/cert/l/CX20120926001783002010" target="_blank"><img rel="nofollow"
                        src="//s01.mifile.cn/i/v-logo-2.png" alt="诚信网站"></a> <a
                    id="_xinchacharenzheng_cert_vip_kexinweb" rel="nofollow"
                    href="//xyt.xinchacha.com/pcinfo?sn=523009637759455232&amp;certType=6" target="_blank"><img
                        rel="nofollow" src="//xyt.xinchacha.com/img/icon/icon3.png" alt="可信网站"></a> <a rel="nofollow"
                    href="//www.mi.com/service/buy/commitment/" target="_blank"><img rel="nofollow"
                        src="//i8.mifile.cn/b2c-mimall-media/ba10428a4f9495ac310fd0b5e0cf8370.png"
                        alt="诚信经营 放心消费"></a><a rel="nofollow"
                    href="https://webcert.cnmstl.net/cert/grade?sn=3af21034e35011eab3ea00163e068ceb"
                    class="safe-auth J_safeAuth                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              "><img
                        rel="nofollow"
                        src="https://cnbj1.fds.api.xiaomi.com/b2c-misite-activity/f1ee261b96ae71e845efba398efeca02.png"
                        class="img1"><img rel="nofollow"
                        src="https://cnbj1.fds.api.xiaomi.com/b2c-misite-activity/1cf9235c7dd1b1f8bf40721bfa8cb793.png"
                        class="img2"></a></div>
            <div class="slogan ir">探索黑科技，小米为发烧而生</div>
            <div class="slogan-bottom">让全球每个人都可以享受科技带来的美好生活</div>
        </div>
    </div>



    <script src="../js/tools.js"></script>
    <script>
        // 判断是否登录
        const user = localStorage.getItem('login_user');
        const login = document.querySelector('.login')
        const noLogin = document.querySelector('.nologin')
        const loginOut = document.querySelector('.loginOut')


        if (user) {
            login.style.display = 'block';
            login.innerHTML = user;
        } else {
            noLogin.style.display = 'block';
            location.href = './log.html'
        }

        // 退出账号
        // 分析：不仅仅是跳转到登录，而是需要把登录信息给删除
        loginOut.addEventListener('click', function () {
            // 先删除登录信息
            // removelocalStorage('login_user');
            // 再跳转到登录
            location.href = './log.html';
        })


        // 显示列表
        // 获取了所有的数据
        let arr = getCo();
        console.log(arr);

        // 筛选满足条件的数据
        arr = arr.filter(v => v.username.includes('YYDS_'));
        console.log(arr);


        // 注意：用户名中实际上没有YYDS_  
        //   使用replace  把  YYDS_  替换成''
        //   使用substr/substring/slice   5开始截取到后面所有

        let html = '';
        arr.forEach((v, i) => {
            const { username, content } = v;
            html += `
                <tr>
                    <td>${i + 1}</td>
                    <td>${username.replace('YYDS_', '')}</td>
                    <td>${content}</td>
                    <td>
                        <button class="del" onclick="del('${username}' , this)">删除</button>
                        <button class="changePwd" onclick="changePwd('${name.replace('YYDS_', '')}', this)">修改密码</button>
                    </td>
                </tr>
            `
        })

        getEle('tbody').innerHTML = html;
        function del(username, obj) {
            removelocalStorage(username);
            // 再删除DOM
            obj.parentNode.parentNode.remove();
        }


        const oCover = getEle('.cover');
        const oUname = getEle('.username');
        const oUpwd = getEle('.newpwd');

        let oldpwdTd;    // 全局变量 , 找到存放新密码的位置

        // 修改密码
        function changePwd(username, that) {
            oCover.style.display = 'block';
            oUname.value = username;
            oUpwd.focus();   // 让密码获取焦点
            oldpwdTd = that.parentNode.previousElementSibling;  // 在点击修改密码的时候，要把旧密码存放的位置给找到
        }


        // 取消
        function btnCancel() {
            oCover.style.display = 'none';
        }

        function btnConfirm() {
            const newPwd = oUpwd.value;
            const uname = oUname.value;

            console.log(uname, newPwd);
            // 把新的密码存入数据
            setlocalStorage('YYDS_' + uname, newPwd);

            oldpwdTd.innerHTML = newPwd;
            oCover.style.display = 'none';
        }
    </script>
</body>

</html>